<template>
  <div>
    <!-- 自定义布局项，不可拖拽与不可调整大小 -->
    <grid-layout
      :layout.sync="layout"
      :col-num="24"
      :row-height="30"
      :is-draggable="false"
      :is-resizable="false"
      :is-mirrored="false"
      :vertical-compact="true"
      :margin="[10, 10]"
      :use-css-transforms="true"
    >
      <grid-item
        v-for="item in layout"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
      >
        <person
          v-if="item.name === '个人信息'"
          :panelSetIcon="true"
          @editDesktopEvent="editDesktop"
        ></person>
        <my-task 
          v-if="item.name === '我的任务'" 
          :panelSetIcon="true"
        >
        </my-task>
        <quick-operation
          v-if="item.name === '快捷入口'"
          :panelSetIcon="true"
        ></quick-operation>
        <general-note-book
          v-if="item.name === '我的便签'"
          :panelSetIcon="true"
        ></general-note-book>


        <document
          v-if="item.name === '待办公文'"
          :panelSetIcon="true"
        ></document>
        <often-apply
          v-if="item.name === '常用流程'"
          :panelSetIcon="true"
        ></often-apply>
        <today-work
          v-if="item.name === '我的日程'"
          :panelSetIcon="true"
        ></today-work>
        
         <notice v-if="item.name === '公告栏'" :panelSetIcon="true"></notice>
        <wait-matter
          v-if="item.name === '待办事项'"
          :panelSetIcon="true"
        ></wait-matter>
        <remind v-if="item.name === '督办提醒'" :panelSetIcon="true"></remind>
        <meeting v-if="item.name === '我的会议'" :panelSetIcon="true"></meeting>
        <process v-if="item.name === '待办流程'" :panelSetIcon="true"></process>
        <my-document
          v-if="item.name === '督办公文'"
          :panelSetIcon="true"
        ></my-document>
      </grid-item>
    </grid-layout>
  </div>
</template>

<script>
import VueGridLayout from 'vue-grid-layout'
import quickOperation from '@/views/index/components/quickOperation'
import MyTask from '@/views/index/components/myTask'
import notice from '@/views/index/components/Notice'
import generalNoteBook from '@/views/index/components/generalNoteBook'

import oftenApp from '@/views/index/components/oftenApp'
import oftenApply from '@/views/index/components/oftenApply'
import todayWork from '@/views/index/components/todayWork'
import Person from '@/views/index/components/Person'
import waitMatter from '@/views/index/components/WaitMatter'
import Remind from '@/views/index/components/Remind'
import Meeting from '@/views/index/components/Meeting'

import Process from '@/views/index/components/Process'
import MyDocument from '@/views/index/components/MyDocument'

import {saveOrUpdateSysUserSetting,saveSysUserSetting,querySysUserSetting} from '@/api/system/sysUserSettingApi';
import { initPanelsLayout } from '@/views/index/components/layout'
import { reqCommonMsg } from '@/util/reqCommonMsg';
import {mapGetters} from 'vuex';
const panelOptions = []
for (const attr in initPanelsLayout) {
  panelOptions.push(initPanelsLayout[attr].name)
}
export default {
  data () {
    return {
      layout: initPanelsLayout,
      panels: panelOptions,
      // 请求参数区
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 1
      },
      reqParams: {
        singleBody: {},
        listBody: [{}],
        sqlCondition:[],
        orderRule: {},
        currentPage: 1,
        pageSize: 10
      },
      commonData: null,
      conditions: [],
      orderRules: [],
      singleBody: {}
    }
  },
  computed: {
    ...mapGetters(['website','userInfo'])
  },
  methods: {
    // 页面加载完成，获取最新面板
    getNewPanels () {
      const layout = this.$getStore({name: this.userInfo.userId+'LayoutColumn'});
      if (layout) {
        this.layout = layout
      }
      else{
        this.getUserSetting();
      }
    },
    /**
     * 打开个人设置对话框
     */
    getUserSetting(){
      let singleBody ={
        id: this.userInfo.userId
      } 
      this.reqParams =  {
        singleBody: singleBody,
      }
      this.commonData = reqCommonMsg(this.reqParams)
      querySysUserSetting(this.commonData).then(res => {
        let layoutSetting = res.data.body.singleBody.selfDefLayoutContent;
        if(layoutSetting != ''){
          this.layout = JSON.parse(layoutSetting);
          this.$setStore({name:  this.userInfo.userId+'LayoutColumn', content: this.layout});
        }
      }, error => {
      });
    },
    // 编辑界面跳转
    editDesktop (opt) {
      this.$emit('changeView','edit');
    }
  },
  created () {
    this.getNewPanels();
  },
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    MyTask,
    quickOperation,
    generalNoteBook,

    notice,
    document,
    oftenApp,
    oftenApply,
    todayWork,
    Person,
    waitMatter,
    Remind,
    Meeting,
    Process,
    MyDocument
  }
}
</script>

<style></style>
